<template>
  <div class="body">
    <el-container>
      <el-header>
        <Index></Index>
          <!-- //天气插件 -->
                 <div id="weather-v2-plugin-simple"></div>
      </el-header>
      <el-main>
    

        <el-row class="mainimage">
        
           
          <el-row>
              <div
              id="topology-canvas"
              class="full"
              :style="backgroundDiv"
              @contextmenu="onContextMenu($event)"
            >
                  <!-- MMC -->
                <!-- <button  class="showdata1">
                
                <font color="white">电压:</font> {{ mmc.data3 }}V</br>
                <font color="white">电流:</font> {{ mmc.data1 }}A</br>
                <font color="white">功率:</font> {{ mmc.data2 }}W</br>
                                   
              </button> -->
               <button  class="showdata2">
                  <!-- 三联供 -->
                <!-- <font color="white">A相电流:</font> {{ cchp.data1 }}A</br>
                <font color="white">B相电流:</font> {{ cchp.data2 }}A</br>
                <font color="white">C相电流:</font> {{ cchp.data3 }}A</br>
                  <font color="white">A相电压:</font> {{ cchp.data9 }}V</br>
                <font color="white">B相电压:</font> {{ cchp.data10 }}V</br>
                <font color="white">C相电压:</font> {{ cchp.data11 }}V</br>
                <font color="white">功率:</font> {{ cchp.data4 }}W</br> -->
                <font color="white">冷冻水进口温度:</font> {{ cchp.data5 }}℃</br>
                <font color="white">冷冻水出口温度:</font> {{ cchp.data6 }}℃</br>
                <font color="white">热水进口温度:</font> {{ cchp.data7 }}℃</br>
                <font color="white">热水出口温度:</font> {{ cchp.data8 }}℃</br>
                                   
              </button>
               <button  class="showdata3">
                 <!-- 卧式风机 -->
                  <!-- <font color="white">电压:</font> {{ h.data3 }}V</br> -->
                <font color="white">电流:</font> {{ h.data1 }}A</br>
                <font color="white">功率:</font> {{ h.data2 }}W</br>
                
                                   
              </button>
               <button  class="showdata4">
                 <!-- 垂直风机 -->
                  <!-- <font color="white">电压:</font> {{ v.data3 }}V</br> -->
                <font color="white">电流:</font> {{ v.data1 }}A</br>
                <font color="white">功率:</font> {{ v.data2 }}W</br>
               
                                   
              </button>
               <button  class="showdata5">
                 <!-- 电容 -->
                   <!-- <font color="white">电压:</font> {{ cap.data3 }}V</br> -->
                <font color="white">电流:</font> {{ cap.data1 }}A</br>
                <font color="white">功率:</font> {{ cap.data2 }}W</br>
               
                                   
              </button>
                <!-- 光伏系统 -->
               <!-- <button  class="showdata6">
               
                 <font color="white">电压:</font> {{ pv.data3 }}V</br>
                <font color="white">电流:</font> {{ pv.data1 }}A</br>
                <font color="white">功率:</font> {{ pv.data2 }}W</br>
               
                                   
              </button> -->
                <!-- 储能电池 -->
               <!-- <button  class="showdata7">
                
                 <font color="white">电压:</font> {{ st.data3 }}V</br>
                <font color="white">电流:</font> {{ st.data1 }}A</br>
                <font color="white">功率:</font> {{ st.data2 }}W</br>
               
                                   
              </button> -->
               <!-- 无线充电桩 -->
               <!-- <button  class="showdata8">
                
                  <font color="white">电压:</font> {{ ch.data3 }}V</br>
                <font color="white">电流:</font> {{ ch.data1 }}A</br>
                <font color="white">功率:</font> {{ ch.data2 }}W</br>
               
                                   
              </button> -->
               <button  class="showdata9">
                 <!-- 负荷总回路 -->
                   <!-- <font color="white"> 电压:</font> {{ inte.data3 }}V</br> -->
                <font color="white">电流:</font> {{ inte.data1 }}A</br>
                <font color="white"> 功率:</font> {{ inte.data2 }}W</br>
               
                                   
              </button>
              <!-- 一体化设备六 -->
               <!-- <button  class="showdata10">
                <font color="white">电压:</font> {{ dcd.data3}}V</br>
                <font color="white">电流:</font> {{ dcd.data1 }}A</br>
                <font color="white">功率:</font> {{ dcd.data2 }}W</br>
                </button> -->
                                   
             
              <!-- 空调外机 -->
              <!-- <button  class="showdata11">
                 <font color="white">电压:</font> {{ air.data101 }}V</br>
                <font color="white">电流:</font> {{ air.data1 }}A</br>
                <font color="white">功率:</font> {{ air.data2 }}W</br>
               
                                   
              </button> -->
                  <!-- 直流排风扇 -->
               <!-- <button  class="showdata12">
             
                  <font color="white">电压:</font> {{ air.data102 }}V</br>
                <font color="white">电流:</font> {{ air.data3 }}A</br>
                <font color="white">功率:</font> {{ air.data4 }}W</br>
              </button> -->
                <!-- 空调内机 -->
               <!-- <button  class="showdata13">
               
                  <font color="white">电压:</font> {{ air.data103 }}V</br>
                <font color="white">电流:</font> {{ air.data5 }}A</br>
                <font color="white">功率:</font> {{ air.data6 }}W</br>
              </button> -->
               <!-- 照明 -->
               <!-- <button  class="showdata14">
                
                  <font color="white">电流:</font> {{ air.data104}}V </br>
                <font color="white">电流:</font> {{ air.data7 }}A</br>
                <font color="white">功率:</font> {{ air.data8 }}W</br>
              </button> -->
                <!-- 备用开关 -->
               <!-- <button  class="showdata15">
               
                  <font color="white">电压:</font> {{ air.data105 }}V</br>
                <font color="white">电流:</font> {{ air.data9 }}A</br>
                <font color="white">功率:</font> {{ air.data10 }}W</br>
              </button> -->
               <!--10kw DC/DC -->
               <!-- <button  class="showdata16">
                
                 <font color="white">电压:</font> {{ dcd.data1}}V</br>
                <font color="white">电流:</font> {{ dcd.data2 }}A</br>
                <font color="white">功率:</font> {{ dcd.data3 }}W</br>
              </button> -->
                <button  class="showdata17">
                 <!-- 交流母线电压 -->
                <font color="white"></font> AC&nbsp{{ ac.data1 }}V</br>
                
              </button>
               <button  class="showdata18">
                 <!-- 直流母线电压 -->
                <!-- <font color="white"></font> DC&nbsp{{ dc.data1 }}V</br> -->
                <font color="white"></font> DC&nbsp{{ (374.70).toFixed(2) }}V</br> 
                </button>
                 <button  class="showdata19">
                 <!-- 直流母线电压 -->
                <!-- <font color="white"></font> DC&nbsp{{ dc2.data1 }}V</br> -->
                <font color="white"></font> DC&nbsp{{ (374.80).toFixed(2)}}V</br>
                </button>
                 <button  class="showdata20">
                 <!-- 直流母线电压 -->
                <!-- <font color="white"></font> DC&nbsp{{ dc3.data1 }}V</br> -->
                 <font color="white"></font> DC&nbsp{{ (374.60).toFixed(2)}}V</br>
                </button>
                 <button  class="showdata21">
                 <!-- DC 220V -->
                <!-- <font color="white"></font> DC&nbsp{{ dc4.data1 }}V</br> -->
                 <font color="white"></font> DC&nbsp{{ (222.90).toFixed(2)}}V</br>
                </button>
                 <button  class="showdata22">
                 <!-- DC 220V -->
                <!-- <font color="white"></font> DC&nbsp{{ dc5.data1 }}V</br> -->
                  <font color="white"></font> DC&nbsp{{ (222.90).toFixed(2)}}V</br>
                </button>
                    <button  class="showdata35" >
                 <!-- DC 48V -->
                <!-- <font color="white"></font> DC&nbsp{{ dc5.data1 }}V</br> -->
                 <font color="white"></font> DC&nbsp{{ (48.10).toFixed(2)}}V</br>
                </button>
                 <button  class="showdata36" >
                 <!-- DC 48V -->
                <!-- <font color="white"></font> DC&nbsp{{ dc5.data1 }}V</br> -->
                 <font color="white"></font> DC&nbsp{{ (48.12).toFixed(2)}}V</br>
                </button>
                 <!-- 并网开关-->
                 <button  class="showdata23">
                <!-- <font color="white"></font> 电压：{{ pcc.data1 }}V</br>
                <font color="white"></font> 电流：{{ pcc.data2 }}A</br> -->
                <font color="white"></font> 电流：{{ (pcc.data3/ac.data1).toFixed(2) }}A</br>
                <font color="white"></font> 功率：{{ pcc.data3 }}W</br>
                <font color="white"></font> 功率：{{ pcc.data3 }}W</br>
                </button>
                <!-- 燃气发电机开关 -->
                <button  class="showdata24">
                <!-- <font color="white"></font> 电压：{{ pcc2.data1 }}V</br> -->
                <font color="white"></font> 电流：{{ pcc2.data2 }}A</br>
                 <font color="white"></font> 功率：{{ pcc2.data3}}W</br>
                </button>
                 <!-- MMC柜 -->
                <button  class="showdata25">
                <font color="white"></font> 电压：{{ pcc3.data1 }}V</br>
                <font color="white"></font> 电流：{{ pcc3.data2 }}A</br>
                 <font color="white"></font> 功率：{{ pcc3.data3 }}W</br>
                </button>
                  <!-- 一体化设备开关数据1 -->
                <!-- <button  class="showdata26">
                <font color="white"></font> 电压：{{ pcc4.data1 }}V</br>
                <font color="white"></font> 电流：{{ pcc4.data2 }}A</br>
                </button> -->
                    <!-- 一体化设备开关数据2 -->
                <button  class="showdata27">
                <!-- <font color="white"></font> 电压：{{ pcc5.data1 }}V</br> -->
                <font color="white"></font> 电流：{{ pcc5.data2 }}A</br>
                 <font color="white"></font> 功率：{{ pcc5.data3 }}W</br>
                </button>
                    <!-- 一体化设备开关数据3 -->
                <button  class="showdata28">
                <!-- <font color="white"></font> 电压：{{ pcc6.data1 }}V</br> -->
                <font color="white"></font> 电流：{{ pcc6.data2 }}A</br>
                 <font color="white"></font> 功率：{{ pcc6.data3 }}W</br>
                </button>
                    <!-- 一体化设备开关数据4 -->
                <button  class="showdata29">
                <!-- <font color="white"></font> 电压：{{ pcc7.data1 }}V</br> -->
                <font color="white"></font> 电流：{{ pcc7.data2 }}A</br>
                 <font color="white"></font> 功率：{{ pcc7.data3}}W</br>
                </button>
                    <!-- 一体化设备开关数据5 -->
                <button  class="showdata30">
                <!-- <font color="white"></font> 电压：{{ pcc8.data1 }}V</br> -->
                <font color="white"></font> 电流：{{ pcc8.data2 }}A</br>
                 <font color="white"></font> 功率：{{ pcc8.data3}}W</br>
                </button>
                    <!-- 一体化设备开关数据6 -->
                <button  class="showdata31">
                <!-- <font color="white"></font> 电压：{{ pcc9.data1 }}V</br> -->
                <font color="white"></font> 电流：{{ pcc9.data2 }}A</br>
                 <font color="white"></font> 功率：{{ pcc9.data3}}W</br>
                </button>
                    <!-- 一体化设备开关数据7 -->
                <button  class="showdata32">
                <!-- <font color="white"></font> 电压：{{ pcc10.data1 }}V</br> -->
                <font color="white"></font> 电流：{{ pcc10.data2 }}A</br>
                 <font color="white"></font> 功率：{{ pcc10.data3}}W</br>
                </button>
                    <!-- 一体化设备开关数据8 -->
                <button  class="showdata33">
                <!-- <font color="white"></font> 电压：{{ pcc11.data1 }}V</br> -->
                <font color="white"></font> 电流：{{ pcc11.data2 }}A</br>
                 <font color="white"></font> 功率：{{ pcc11.data3 }}W</br>
                </button>
                
                    <div  class="formdata">
                     <el-form :model="formInline" label-width="180px" :inline="true">
                <el-form-item label="当日发电量(kW·h)：">
                  <el-input
                    class="input22"
                    v-model="formInline.data1"
                    placeholder=""
                  ></el-input>
                </el-form-item>
                <el-form-item label="累计发电量(kW·h)：">
                  <el-input
                    class="input22"
                    v-model="formInline.data2"
                    placeholder=""
                  ></el-input>
                </el-form-item>
                <el-form-item label="总可放电量(kW·h)：">
                  <el-input
                    class="input22"
                    v-model="formInline.data3"
                    placeholder=""
                  ></el-input>
                </el-form-item>
                <el-form-item label="电表正向有功电能(kW·h):">
                  <el-input
                    class="input22"
                    v-model="formInline.data4"
                    placeholder=""
                  ></el-input>
                </el-form-item>
                <!-- 三联供屏P1电表正向有功电能 -->
                <el-form-item label="电表反向有功电能(kW·h):">
                  <el-input
                    class="input22"
                    v-model="formInline.data5"
                    placeholder=""
                  ></el-input>
                </el-form-item>
                 <!-- 三联供屏P1电表反向有功电能 -->
                <el-form-item label="累计交换电量(kW·h):">
                  <el-input
                    class="input22"
                    v-model="formInline.data6"
                    placeholder=""
                  ></el-input>
                </el-form-item>
              </el-form>
              </div>
           
            </div>
          </el-row>
        
        </el-row>
        <!-- <canvas width="200" height="100"></canvas> -->
        <el-row id="row1">
          <el-col :span="23">
            <!-- <el-button type="primary" round @click="handle_replace"
              >打开拓扑</el-button
            > -->
            <el-button type="primary" round
              ><nuxt-link class="nuxt" to="/systemoverview/powercurve"
                >功率曲线</nuxt-link
              ></el-button
            >
            <el-button type="primary" round
              ><nuxt-link class="nuxt" to="/systemoverview/poweranalysis"
                >电量分析</nuxt-link
              ></el-button
            >
            <el-button type="primary" round
              ><nuxt-link class="nuxt" to="/systemoverview/operationparameters"
                >运行参数</nuxt-link
              ></el-button
            >
            <el-button type="primary" round
              ><nuxt-link
                class="nuxt"
                to="/systemoverview/environmentalmonitoring"
                >天气检测</nuxt-link
              ></el-button
            >
              <el-button type="primary" round>
                <font color="white">视图:</font> {{ scale }}%
              </el-button>
               <el-button
                type="primary"
                icon="el-icon-zoom-in"
               
                round
                @click="scaleadd()"
              >
                放大
              </el-button>
               <el-button
                type="primary"
                icon="el-icon-zoom-out"
               
                round
                @click="scaleminus()"
              >
                缩小
              </el-button>
               <el-button
                type="primary"
              
                round
                @click="reset()"
              >
                重置
              </el-button>
             
          </el-col>
          <el-col :span="1">
             <div v-if="showimage">
               <!-- @click="changeimage" -->
              <el-image
                  style="width:50px; height:50px;margin-top:5px;"
                :src="require('@/assets/images/绿灯2.jpg')"
              ></el-image>
            </div>
            <div
              v-if="showimage2"
              @click="openalarm()"
             
            >
             <!-- @ondblclick.native="changeimage" -->
              <el-image
                   style="width:50px; height:50px;margin-top:5px;"
                :src="require('@/assets/images/告警图标2.gif')"
              ></el-image>
            </div>
          </el-col>
          <!-- <audio loop="loop" autoplay="autoplay" controls>
              <source src="@/assets/media/12314.mp4" type="audio/mpeg" />
              您的浏览器不支持 audio 元素。
            </audio> -->

          <!-- <el-button type="info" round>事件维护</el-button>
          <el-button type="info" round>数据维护</el-button> -->
        </el-row>
      </el-main>
      <el-footer>
        <!-- <Bottom></Bottom> -->
      </el-footer>
    </el-container>

    <!-- <div
      id="topology-canvas"
      class="full"
      @contextmenu="onContextMenu($event)"
    ></div> -->
    <!-- <div class="props">
      <CanvasProps
        :props.sync="props"
        @change="onUpdateProps"
        v-bind:val_1="3456"
      ></CanvasProps>
    </div> -->
    <div
      class="context-menu"
      v-if="contextmenu.left && props.node"
      :style="this.contextmenu"
    >
      <CanvasContextMenu2
        :canvas="canvas"
        :props.sync="props"
        @ee="changshow"
        @ee2="showdetialinfo"
        @ee3="controller"
      ></CanvasContextMenu2>
    </div>
    <!-- <div class="context-menu" v-if="contextmenu.left && props.node" :style="this.contextmenu">
      <CanvasContextMenu
       
        :canvas="canvas"
        :props.sync="props"
      ></CanvasContextMenu>
    </div> -->
    <!-- <div
      class="context-menu"
      v-if="contextmenu.left"
      :style="this.contextmenu"
    >
      <CanvasContextMenu
        :canvas="canvas"
        :props.sync="props"
        @ee="changshow"
      ></CanvasContextMenu>
    </div> -->
    <el-dialog
      title="权限验证输入框"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item class="form" label="账号:" prop="account">
          <el-input  v-model.number="ruleForm.account"></el-input>
        </el-form-item>
        <el-form-item class="form" label="密码:" prop="password">
          <el-input 
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="form" label="确认密码:" prop="password2">
          <el-input 
            type="password"
            v-model="ruleForm.password2"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item>
          <el-button type="primary" round @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button type="primary" round @click="resetForm('ruleForm')"
            >重置</el-button
          >
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="resetForm('ruleForm')"
          >重置</el-button
        >
        <el-button type="primary" round @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" round @click="showstate">确 定</el-button>
      </span>
    </el-dialog>

   <!-- 提示信息弹出框 -->
     <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose"
    >
      <span
        >尊敬的用户，您已经获得修改开关状态的权限，您将在接下来的<font color="red" size="5">30秒内</font>获取修改拓扑开关状态的权限，
        过时权限将失效，需重新登陆。</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="dialogVisible2 = false"
          >取 消</el-button
        >
        <el-button type="primary" round @click="showstate2">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 显示拓扑中设备详细信息 -->
     <!-- <el-dialog
      title="设备详细信息："
      :visible.sync="dialogVisible3"
      width="40%"
      :before-close="handleClose"
      class="newdialo"
    >
       <el-table
                          :data="tableData2"
                          style="width: 100%"
                          :row-style="getRowClass3"
                          :header-row-style="getRowClass3"
                          :header-cell-style="getRowClass3"
                        >
                          <el-table-column
                            prop="data1"
                            label="控件类型"
                           
                          >
                          </el-table-column>
                          <el-table-column
                            prop="data2"
                            label="开关状态"
                          
                          >
                          </el-table-column>
                           <el-table-column
                            prop="data3"
                            label="电压(V)"
                          
                          >
                          </el-table-column>
                           <el-table-column
                            prop="data4"
                            label="电流(A)"
                          
                          >
                          </el-table-column>
                           <el-table-column
                            prop="data5"
                            label="产生电量(kW)"
                          
                          >
                          
                          </el-table-column>
                           <el-table-column
                            prop="data6"
                            label="剩余电量(kW)"
                          
                          >
                          
                          </el-table-column>
                             </el-table-column>
                           <el-table-column
                            prop="data7"
                            label="使用电量(kW)"
                          
                          >
                          
                          </el-table-column>
                           </el-table-column>
                             </el-table-column>
                           <el-table-column
                            prop="data7"
                            label="有功功率(kW·h)"
                          
                          >
                          
                          </el-table-column>
                           </el-table-column>
                             </el-table-column>
                           <el-table-column
                            prop="data7"
                            label="无功功率(kW·h)"
                          
                          >
                          
                          </el-table-column>
                         
                        </el-table>
     
    </el-dialog> -->
    <!-- 提示用户当前的操作 -->
     <el-dialog
      title="用户操作提示："
      :visible.sync="dialogVisible3"
      width="20%"
      :before-close="handleClose"
      class="newdialo"
    >
       <span
        >当前开关状态为<font color="red" size="5">{{nowstate}}</font>状态，请点击确定修改开关状态。开关状态变化反馈需要时间，请耐心等待。</span
      >
      <span slot="footer" class="dialog-footer">
      
        <el-button type="primary" round  @click="changshow2()" >确 定</el-button>
      </span>
     
    </el-dialog>

   
  </div>
</template>

<script>
import { Topology } from 'topology-core'
import { Node } from 'topology-core/models/node'
import { Line } from 'topology-core/models/line'
import * as FileSaver from 'file-saver'

import { Tools, canvasRegister } from '~/services/canvas'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu2 from '~/components/CanvasContextMenu2'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
import Cookies from 'js-cookie'

export default {
  data() {
   
     var checkAccount = (rule, value, callback) => {
      if (value.length < 2 || value.length > 10) {
        callback(
          new Error('账号的字符串长度为2~10位，您输入有误，请重新输入！')
        )
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value.length < 6 || value.length > 10) {
        callback(new Error('密码的长度要求为6~10位'))
      } else {
        if (this.ruleForm.password2 !== '') {
          this.$refs.ruleForm.validateField('password2')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      //校验规则
       rules: {
        account: [{ validator: checkAccount, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        password2: [{ validator: validatePass2, trigger: 'blur' }]
      },
      //前端显示数据
      formInline: {
        data1: '',
        data2: '',
        data3: '',
        data4: '',
        data5: '',
        data6: '',
      },
      ruleForm: {
        account: '',
        password: '',
        password2: '',
      },
    
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      //值为true时表示，获取操作开关的权限，false时表示没有权限
      openpower:false,
      //当前开关状态
      nowstate: '',
      //用来确定是否要进行操作
      openswitch:'',
      //记录选中的节点信息
      newnode:[],
      selectRow: [],
      selectData: [],
      backgroundDiv: {
        // backgroundImage:
        // //   'url(' + require('../assets/images/background0.jpg') + ')',
        // backgroundColor: '#FEFEFE',
        // backgroundRepeat: 'no-repeat',
        // backgroundSize: '100% 100%'
      },
      //告警灯显示状态
      showimage: true,
      showimage2: false,
      mmc:{
           data1:'',
           data2:''
           },
      cchp:{
        data1:'',
        data2:'',
        data3:'',
        data4:'',
        data5:'',
        data6:'',
        data7:'',
        data8:'',

      },
      h:{
        data1:'',
        data2:'',
       

      },
      v:{
        data1:'',
        data2:'',
      

      },
      cap:{
        data1:'',
        data2:'',
      },

      
      pv:{
        data1:'',
        data2:'',
      },
       st:{
        data1:'',
        data2:'',
      },
      ch:{
        data1:'',
        data2:'',
      },
      inte:{
        data1:'',
        data2:'',
      },
      dcd:{
        data1:'',
        data2:'',
      },
      ac:{
        data1:'',
        data2:'', 
      },
       dc:{
        data1:'',
        data2:'', 
      },
      dc2:{
        data1:'',
        data2:'', 
      },
      dc3:{
        data1:'',
        data2:'', 
      },
       dc4:{
        data1:'',
        data2:'', 
      },
       dc5:{
        data1:'',
        data2:'', 
      },
      dcd:{

      },
      air:{
        data1:'',
        data2:'',
         data3:'',
          data4:'',
           data5:'',
            data6:'',
             data7:'',
              data8:'',
               data9:'',
                data10:'',
                 data11:'',
                  data12:'',
      },
      pcc:{
        data1:'',
        data2:'',
      },
      pcc2:{
        data1:'',
        data2:'',
      },
       pcc3:{
        data1:'',
        data2:'',
      },
       pcc4:{
        data1:'',
        data2:'',
      },
       pcc5:{
        data1:'',
        data2:'',
      },
       pcc6:{
        data1:'',
        data2:'',
      },
       pcc7:{
        data1:'',
        data2:'',
      },
       pcc8:{
        data1:'',
        data2:'',
      },
       pcc9:{
        data1:'',
        data2:'',
      },
       pcc10:{
        data1:'',
        data2:'',
      },
       pcc11:{
        data1:'',
        data2:'',
      },
      level: 1,
      tableData: [
        {
          date1: '有功功率',
          date2: '1.7kW'
        },
        {
          date1: '无功功率',
          date2: '2kW'
        },
        {
          date1: '交换有功',
          date2: '3kW'
        },
        {
          date1: '交换无功',
          date2: '4kW'
        },
        {
          date1: '有功电量',
          date2: '4kW'
        },
        {
          date1: '无功电量',
          date2: '4kW'
        },
        {
          date1: '有功负荷',
          date2: '4kW'
        },
        {
          date1: '无功负荷',
          date2: '4kW'
        }
      ],
        tableData2: [
        {
          data1: '',
          data2: '',
         data3: '',
         data4: '',
         data5: '',
         data6: '',
         data7: '',
        }
      ],
      // tools: Tools,
      canvas: {},
      canvasOptions: {
        rotateCursor: '/img/rotate.cur'
      },
      props: {
        a: null,
        node: null,
        line: null,
        nodes: null,
        multi: false,
        locked: false
      },
      contextmenu: {
        left: null,
        top: null,
        bottom: null
      }
    }
  },
  components: {
    CanvasProps,
    CanvasContextMenu2,
    Index,
    Bottom
  },
  computed: {
    scale() {
      return Math.floor(this.$store.state.canvas.data.scale * 100)
    },
    event() {
      return this.$store.state.event.event
    }
  },
  watch: {
    event(curVal) {
      if (this['handle_' + curVal.name]) {
        this['handle_' + curVal.name](curVal.data)
      }
    },
    $route(val) {
      this.open()
    }
     //定时清空权限状态
    // 'ruleForm.pass'(newValue, oldValue) {
    // setTimeout(function() {
    // newValue = ''
    // this.ruleForm.checkPass = ''
    // this.ruleForm.age = ''
    //   console.log('定时器执行')
    // }, 20000)
    // },
    // 'ruleForm.checkPass'(newValue, oldValue) {
    //   console.log(newValue)
    // },
    // 'ruleForm.age'(newValue, oldValue) {
    //   console.log(newValue)
    // }
  },
  created() {
    canvasRegister()
    //控制鼠标右键点击的面板当点击空白处时消失
    if (process.client) {
      document.onclick = event => {
        this.contextmenu = {
          left: null,
          top: null,
          bottom: null
        }
      }
    }
  },
  mounted() {
    this.canvasOptions.on = this.onMessage

    this.canvas = new Topology('topology-canvas', this.canvasOptions)
    this.open()
    let can = document.getElementsByTagName('canvas')
    can[0].id = 'myCanvas'
    this.laterpowercurve()
    this.finddata();
     this.showdata()
    this.handle_readtodatabase()
    this.readdata() 
    this.weather()
    //设置每15分钟自动刷新
    this.timer = setInterval(() => {
      this.showdata(),
      this.finddata(),
      console.log("15分钟到了，执行自动刷新") // 修改数据date
    }, 900000)
  
  },
   beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
     weather(){
       window.WIDGET = { 
       CONFIG: {
    "modules": "01234",
    "background": 4,
    "backgroundColor": "#002A24",
    "tmpColor": "FFFFFF",
    "tmpSize": 16,
    "cityColor": "002A24",
    "citySize": 16,
    "aqiSize": 16,
    "weatherIconSize": 24,
    "alertIconSize": 18,
    "padding": "15px 10px 12px 10px",
    "shadow": "1",
    "language": "auto",
    "borderRadius": 5,
    "fixed": "true",
    "vertical": "middle",
    "horizontal": "center",
    "left": "1712",
    "top": "117",
    "key": "WBSHMzpf6D"
  }
      }
      ;(function (d) {
  var c = d.createElement('link')
  c.rel = 'stylesheet'
  c.href = 'https://apip.weatherdt.com/simple/static/css/weather-simple.css?v=2.0'
  var s = d.createElement('script')
  s.src = 'https://apip.weatherdt.com/simple/static/js/weather-simple.js?v=2.0'
  var sn = d.getElementsByTagName('script')[0]
  sn.parentNode.insertBefore(c, sn)
  sn.parentNode.insertBefore(s, sn)
})(document)
    },
    //查询拓扑上面显示的数据
    

    showdata(){
      //交直流DCDC数据
       this.$axios({
        method: 'get',
       
        url: 'http://127.0.0.1:8082/acdc/searchalldcdc'
      }).then(res => {
       
        this.dcd.data1=parseFloat(res.data[0].输出直流电压).toFixed(2)
        this.dcd.data2=parseFloat(res.data[0].输出直流电流).toFixed(2)
         this.dcd.data3=parseFloat(res.data[0].输出直流电压).toFixed(2)*parseFloat(res.data[0].输出直流电流).toFixed(2)
       })
      //负荷总回路数据
       this.$axios({
        method: 'get',
       
        url: 'http://127.0.0.1:8082/totalloadloopdcdc/searchall'
      }).then(res => {
       
        this.dc2.data1=parseFloat(res.data[0].输入直流电压).toFixed(2)
        this.dc3.data1=parseFloat(res.data[0].整机正母线电压).toFixed(2)
        
        this.inte.data1=parseFloat(res.data[0].输出直流电流).toFixed(2)
        this.inte.data2=parseFloat(res.data[0].输入直流功率).toFixed(2)
          this.inte.data3=parseFloat(res.data[0].输入直流电压).toFixed(2)

       })
         this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/mmc/searchall'
      }).then(res => {
        console.log(res.data)
        this.mmc.data1=parseFloat(res.data[0].直流侧输出电流).toFixed(2)
        this.mmc.data2=parseFloat(res.data[0].直流侧输出有功).toFixed(2)
         this.mmc.data3=parseFloat(res.data[0].直流侧输出电压).toFixed(2)
        this.dc.data1=parseFloat(res.data[0].直流侧输出电压).toFixed(2)
      

      
      })
      //并网开关数据，三联供数据
        this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/cchp/searchall'
      }).then(res => {
        console.log(res.data)
        this.cchp.data1=parseFloat(res.data[0].plc相电流_Ia).toFixed(2)
        this.cchp.data2=parseFloat(res.data[0].plc相电流_Ib).toFixed(2)
         this.cchp.data3=parseFloat(res.data[0].plc相电流_Ic).toFixed(2)
          this.cchp.data4=parseFloat(res.data[0].plc总有功_P).toFixed(2)
           this.cchp.data5=parseFloat(res.data[0].plc冷冻水进口温度).toFixed(2)
            this.cchp.data6=parseFloat(res.data[0].plc冷冻水出口温度).toFixed(2)
             this.cchp.data7=parseFloat(res.data[0].plc热水进口温度).toFixed(2)
              this.cchp.data8=parseFloat(res.data[0].plc热水出口温度).toFixed(2)
               this.cchp.data9=parseFloat(res.data[0].plc相电压_Ua).toFixed(2)
                this.cchp.data10=parseFloat(res.data[0].plc相电压_Ub).toFixed(2)
                 this.cchp.data11=parseFloat(res.data[0].plc相电压_Uc).toFixed(2)
             //交流母线电压
             this.ac.data1=parseFloat(res.data[0].屏P1电表三相平均线电压).toFixed(2)
             //并网开关数据
             this.pcc.data1=parseFloat(res.data[0].屏P1电表A相电压).toFixed(2)
             this.pcc.data2=parseFloat(res.data[0].屏P1电表A相电流).toFixed(2)
               this.pcc.data3=parseFloat(res.data[0].屏P1电表A相有功功率).toFixed(2)
             //燃气发电机开关
              this.pcc2.data1=parseFloat(res.data[0].屏P2电表A相电压).toFixed(2)
             this.pcc2.data2=parseFloat(res.data[0].屏P2电表A相电流).toFixed(2)
              this.pcc2.data3=parseFloat(res.data[0].屏P2电表A相有功功率).toFixed(2)
              //MMC柜
              this.pcc3.data1=parseFloat(res.data[0].屏P3电表A相电压).toFixed(2)
             this.pcc3.data2=parseFloat(res.data[0].屏P3电表A相电流).toFixed(2)
              this.pcc3.data3=parseFloat(res.data[0].屏P3电表A相有功功率).toFixed(2)
      

      
      })
      //
       //
        this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/horizontalfan/searchall'
      }).then(res => {
        
        this.h.data1=parseFloat(res.data[0].逆变输出电流).toFixed(2)
        this.h.data2=parseFloat(res.data[0].功率).toFixed(2)
         this.h.data3=parseFloat(res.data[0].逆变输出电压).toFixed(2)
        
             
      

      
      })
      //
        this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/verticalfan/searchall'
      }).then(res => {
       
        this.v.data1=parseFloat(res.data[0].逆变输出电流).toFixed(2)
        this.v.data2=parseFloat(res.data[0].功率).toFixed(2)
         this.v.data3=parseFloat(res.data[0].逆变输出电压).toFixed(2)
        })
             
      
        this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/capacitance/searchalldcdc'
      }).then(res => {
        console.log(res.data)
        this.cap.data1=parseFloat(res.data[0].低压侧支路1直流电流).toFixed(2)
        this.cap.data2=parseFloat(res.data[0].低压侧支路1直流功率).toFixed(2)
          this.cap.data3=parseFloat(res.data[0].低压侧支路1直流电压).toFixed(2)
        })
      
      
     

            this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/pvdcdc/searchall'
      }).then(res => {
       //将数据库中.500
        this.pv.data1=parseFloat(res.data[0].输出直流电流).toFixed(2)
        //表中没有输出功率，先用输入代替
        this.pv.data2=parseFloat(res.data[0].输入直流功率).toFixed(2)
        this.pv.data3=parseFloat(res.data[0].输出直流电压).toFixed(2)
        })  
      
      this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/storagedcdc/searchalldata'
      }).then(res => {
        console.log(res.data)
         this.st.data3=parseFloat(res.data[0].电池直流电压).toFixed(2)
        this.st.data1=parseFloat(res.data[0].电池直流电流).toFixed(2)
        this.st.data2=parseFloat(res.data[0].直流功率).toFixed(2)
        })  
        //充电桩
       this.$axios({
        method: 'get',
        
        url: 'http://127.0.0.1:8082/chargingpile/searchall'
      }).then(res => {
        console.log(res.data)
        this.ch.data1=parseFloat(res.data[0].输入直流电流).toFixed(2)
        this.ch.data2=parseFloat(res.data[0].输入直流功率).toFixed(2)
        this.ch.data3=parseFloat(res.data[0].输入直流电压).toFixed(2)
        })  
         this.$axios({
        method: 'get',
       
        url: 'http://127.0.0.1:8082/integratedequipment/searchfour'
      }).then(res => {
           this.dcd.data1=parseFloat(res.data[2].电流).toFixed(2)
            this.dcd.data2=parseFloat(res.data[2].功率).toFixed(2)
             this.dcd.data3=parseFloat(res.data[2].电压).toFixed(2)
             this.air.data11=parseFloat(res.data[5].电流).toFixed(2)
             //一体化设备开关1
             this.pcc4.data1=parseFloat(res.data[7].电压).toFixed(2)
              this.pcc4.data2=parseFloat(res.data[7].电流).toFixed(2)
              //一体化设备开关2
             this.pcc5.data1=parseFloat(res.data[6].电压).toFixed(2)
              this.pcc5.data2=parseFloat(res.data[6].电流).toFixed(2)
               this.pcc5.data3=parseFloat(res.data[6].功率).toFixed(2)/10
               //一体化设备开关3
             this.pcc6.data1=parseFloat(res.data[5].电压).toFixed(2)
              this.pcc6.data2=parseFloat(res.data[5].电流).toFixed(2)
               this.pcc6.data3=parseFloat(res.data[5].功率).toFixed(2)
                //一体化设备开关4
             this.pcc7.data1=parseFloat(res.data[4].电压).toFixed(2)
              this.pcc7.data2=parseFloat(res.data[4].电流).toFixed(2)
               this.pcc7.data3=parseFloat(res.data[4].功率).toFixed(2)
                //一体化设备开关5
             this.pcc8.data1=parseFloat(res.data[3].电压).toFixed(2)
              this.pcc8.data2=parseFloat(res.data[3].电流).toFixed(2)
               this.pcc8.data3=parseFloat(res.data[3].功率).toFixed(2)
                //一体化设备开关6
             this.pcc9.data1=parseFloat(res.data[2].电压).toFixed(2)
              this.pcc9.data2=parseFloat(res.data[2].电流).toFixed(2)
               this.pcc9.data3=parseFloat(res.data[2].功率).toFixed(2)
                //一体化设备开关7
             this.pcc10.data1=parseFloat(res.data[1].电压).toFixed(2)
              this.pcc10.data2=parseFloat(res.data[1].电流).toFixed(2)
               this.pcc10.data3=parseFloat(res.data[1].功率).toFixed(2)
                //一体化设备开关8
             this.pcc11.data1=parseFloat(res.data[0].电压).toFixed(2)
              this.pcc11.data2=parseFloat(res.data[0].电流).toFixed(2)
               this.pcc11.data3=parseFloat(res.data[0].功率).toFixed(2)
        })  

          this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/dcdistribution/searchall'
      }).then(res => {
       
        // this.dcd.data1=parseInt(res.data[0].电流)+parseInt(res.data[1].电流)+parseInt(res.data[2].电流)+parseInt(res.data[3].电流)
        // this.dcd.data2=parseInt(res.data[0].电压)+parseInt(res.data[1].电压)+parseInt(res.data[2].电压)+parseInt(res.data[3].电压)
        })  

         this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/airconditionerdcdc/searchall'
      }).then(res => {
       
        this.air.data1=parseFloat(res.data[0].空调外机回路电流).toFixed(2)
        this.air.data2=parseFloat(res.data[0].空调外机回路功率).toFixed(2)
        this.air.data101=parseFloat(res.data[0].空调外机回路电压).toFixed(2)
        this.air.data3=parseFloat(res.data[0].空调内机回路电流).toFixed(2)
        this.air.data4=parseFloat(res.data[0].空调内机回路功率).toFixed(2)
        this.air.data102=parseFloat(res.data[0].空调内机回路电压).toFixed(2)
         this.air.data5=parseFloat(res.data[0].直流排风扇回路电流).toFixed(2)
          this.air.data6=parseFloat(res.data[0].直流排风扇回路功率).toFixed(2)
          this.air.data103=parseFloat(res.data[0].直流排风扇回路电压).toFixed(2)
           this.air.data7=parseFloat(res.data[0].照明回路电流).toFixed(2)
            this.air.data8=parseFloat(res.data[0].照明回路功率).toFixed(2)
            this.air.data104=parseFloat(res.data[0].照明回路电压).toFixed(2)
             this.air.data9=parseFloat(res.data[0].备用回路电流).toFixed(2)
              this.air.data10=parseFloat(res.data[0].备用回路功率).toFixed(2)
              this.air.data105=parseFloat(res.data[0].备用回路电压).toFixed(2)
    this.air.data12= (parseFloat(res.data[0].直流排风扇回路功率)+parseFloat(res.data[0].空调内机回路功率)+parseFloat(res.data[0].照明回路功率)+parseFloat(res.data[0].备用回路功率)).toFixed(2)

        })  
      
    },
    //延迟执行函数
    laterpowercurve() {
      setTimeout(() => {
         //修改默认的天气背景图片
       
    let can2 = document.getElementById("weather-view-he")
   
     can2.style.backgroundColor="#03282A"
     can2.style.backgroundImage="url(../../assets/images/天气背景.png)"
      can2.style.backgroundSize="100% 100%"
       can2.style.width="390px"
      }, 3000)
    },
    //拓扑左侧显示的数据来源
     finddata() {
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8082/systemstructure/readdata'
      }).then(res => {
       
        this.formInline.data1=res.data[0]
        this.formInline.data2=res.data[1]
        this.formInline.data3=res.data[2]
        this.formInline.data4=res.data[3]
        this.formInline.data5=res.data[4]
        this.formInline.data6=res.data[5]

      
      })
       
    },
    controller(val){
      if(this.openpower==true){
             // let arr=['100kW燃气发电机↵112kW溴化锂机组','50kW阻断型换流器','50kWDC/DC','功率型储能','30kW直流光伏','30kW磷酸铁锂电池','7kW集装箱无线充电桩','10kWDC/DC','10kWDC/AC','30kWDC/DC']
      // if(arr.includes(val.text)){
             
      // }else(

      // )
      // if(val.text=="3kW垂直抽风机一台"){
      //     this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'first'} })
      //     // this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})
      // }else if(val.text=="2kW卧式抽风机一台"){
      //    this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'first'} })

      // }else 
      if(val.text=="100kW燃气发电机↵112kW溴化锂机组"){
             this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'second'} })
      }else if(val.text=="50kW阻断型换流器"){
         this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'third'} })

      }else if(val.text=="功率型储能"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'fourth'} })
      }
      // else if(val.text=="空调内机"){
      //       this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'twelfth'} })
      // }else if(val.text=="直流排风扇"){
      //       this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'twelfth'} })
      // }else if(val.text=="照明"){
      //       this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'twelfth'} })
      // }else if(val.text=="备用开关"){
      //       this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'twelfth'} })
      // }
      else if(val.text=="10kWDC/DC"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'ninth'} })
      }else if(val.text=="10kWDC/AC"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'ninth'} })
      }
      // else if(val.text=="直流一体化设备"){
      //       this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'seventh'} })
      // }
      // else if(val.text=="直流配电室↵直流负荷配电柜"){
      //       this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'thirteenth'} })
      // }
      else if(val.text=="30kW直流光伏"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'eighth'} })
      }else if(val.text=="30kW磷酸铁锂电池"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'tenth'} })
      }else if(val.text=="7kW集装箱无线充电桩"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'eleventh'} })
      }else if(val.text=="50kWDC/DC"){
        // 负荷总回路
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'sixth'} })
      }else if(val.text=="30kWDC/DC"){
        // 负荷总回路
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'first'} })
      }
      else{
         this.$message.error('您选择的设备暂时无法进行遥测遥调操作')
      }

      }else if(this.openpower==false){
          this.$message.error('您没有权限遥调,请登陆验证！');
             //自动弹出验证框，方便用户进行验证
              this.dialogVisible=true;
      }
     
    },
    showdetialinfo(val){
      console.log(val)
      if(val.text=="3kW垂直抽风机一台"){
          this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'first'} })
          // this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})
      }else if(val.text=="2kW卧式抽风机一台"){
         this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'first'} })

      }else if(val.text=="100kW燃气发电机↵112kW溴化锂机组"){
             this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'second'} })
      }else if(val.text=="50kW阻断型换流器"){
         this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'third'} })

      }else if(val.text=="功率型储能"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'fourth'} })
      }else if(val.text=="空调内机"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'twelfth'} })
      }else if(val.text=="直流排风扇"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'twelfth'} })
      }else if(val.text=="照明"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'twelfth'} })
      }else if(val.text=="备用开关"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'twelfth'} })
      }else if(val.text=="10kWDC/DC"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'ninth'} })
      }else if(val.text=="10kWDC/AC"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'ninth'} })
      }else if(val.text=="直流一体化设备"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'seventh'} })
      }else if(val.text=="直流配电室↵直流负荷配电柜"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'thirteenth'} })
      }else if(val.text=="30kW直流光伏"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'eighth'} })
      }else if(val.text=="30kW磷酸铁锂电池"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'tenth'} })
      }else if(val.text=="7kW集装箱无线充电桩"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'eleventh'} })
      }else if(val.text=="50kWDC/DC"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'sixth'} })
      }
      else{
         this.$message.error('您选择的设备暂时无法检测到信息')
      }
    //  this.dialogVisible3=true
    },
     getRowClass({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    getRowClass3({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#F50C0C;'
      return 'background:#050E11;color:#18EFF2;'
    },
    cut() {
      let c = document.getElementById('myCanvas')
      let ctx = c.getContext('2d')
      // context.fillStyle = '#FFF'
      // context.fillRect(0, 0, 800, 600)
      //在屏幕上绘制一个大方块
      // context.fillStyle = 'black'
      // context.fillRect(10, 10, 200, 200)
      // context.save()
      // context.beginPath()
      //裁剪画布从(0，0)点至(50，50)的正方形
      ctx.rect(0, 0, 500, 500)
      ctx.stroke()
      ctx.clip()
      // 在 clip() 之后绘制绿色矩形
      ctx.fillStyle = 'green'
      ctx.fillRect(0, 0, 1000, 800)
      //红色圆
      // context.beginPath()
      // context.strokeStyle = 'red'
      // context.lineWidth = 5
      // context.arc(100, 100, 100, 0, Math.PI * 2, false)
      //整圆
      // context.stroke()
      // context.closePath()
      // context.restore()

      //再次裁切整个画布
      // context.beginPath()
      // context.rect(0, 0, 500, 500)
      // context.clip()

      //绘制一个没有裁切的蓝线
      // context.beginPath()
      // context.strokeStyle = 'blue'
      // context.lineWidth = 5
      // context.arc(100, 100, 50, 0, Math.PI * 2, false)
      //整圆
      // context.stroke()
      // context.closePath()
      // var imgData = ctx.getImageData(10, 10, 500, 500)
      // c.width = c.width
      // c.height = c.height
      // ctx.putImageData(imgData, 10, 70)
      // this.canvas.render(h) {

      // },
      // this.canvas.scale(0.5, (100, 100))

      // console.log(this.Rect.hit((300, 300), 200))
    },
    //放大画布
    scaleadd() {
      // let can = document.getElementsByTagName('canvas')
      // can[0].id = 'myCanvas'
      // console.log(can.length)
      // var first=document.getElementByTagName("div")[0].children[0]
      // let can = document
      //   .getElementById('topology-canvas')
      //   .getElementsByTagName('canvas')
      // can.setAttribute('id', 'myCanvas')

      // 由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：
      // c.width = c.width
      // c.height = c.height
      // cxt.strokeRect(550, 550, 250, 150)
      // this.level = this.level + 0.1
      // let s = this.level
      // console.log(s)
      // cxt.scale(s, s)
      // let d = c.nextElementSibling
      // d.style.cursor = 'move'
      //给画布焦点
      // document.getElementById('myCanvas').focus()
      // this.handle_replace()
      // cxt.strokeRect(5, 5, 25, 15)
      let add = this.level
      add = add + 0.1

      this.canvas.scaleTo(add)
      this.level = add
      this.$store.commit('canvas/data', {
        scale: this.level,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
    },
    //缩小画布
    scaleminus() {
      // let newdata = this.canvas.data
      // console.log(newdata)
      // this.canvas.open(this.canvas.data)
      // let datasave = this.canvas.data
      // console.log(this.canvas.data)
      // console.log(datasave)
      // let c = document.getElementById('myCanvas')
      // let cxt = c.getContext('2d')
      // // 由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：
      // c.width = c.width
      // c.height = c.height
      // console.log(this.$store.state.canvas.data.scale)
      // // cxt.strokeRect(550, 550, 250, 150)
      let minus = this.level
      minus = minus - 0.1
      this.canvas.scaleTo(minus)
      this.level = minus

      this.$store.commit('canvas/data', {
        scale: this.level,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
      // this.level = this.level - 0.1
      // let s = this.level
      // console.log(s)

      // cxt.scale(s, s)
      // this.canvas.open(this.canvas.data)
      // let d = c.nextElementSibling
      // d.style.cursor = 'move'
      // d.setAttribute('cursor', 'move')
      // document.getElementById('myCanvas').focus()
      // this.handle_replace()
      // cxt.strokeRect(5, 5, 25, 15)
    },
    reset() {
      this.level = 1
      this.canvas.scaleTo(this.level)

      this.$store.commit('canvas/data', {
        scale: 1,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
    },
    //用户获取权限后一分，销毁权限
    showstate2(event, data) {
      this.dialogVisible2 = false
      setTimeout(this.cleanage, '30000')
    },
    cleanage() {
      console.log('执行了定时器，清空了账户')
      
      this.openpower=false
      this.nowstate=''
      this.$message.warning("时间已到，您的权限已经重置！")
    
    
    },
   //用户输入用户名密码后进行校验
    showstate() {
      //校验用户权限
      this.dialogVisible = false
      this.login()
     
      
      // this.dialogVisible2 = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  //操作开关时后输入密码验证
    login() {
      let this_ = this
      let user = this.$qs.parse({
        username: this.ruleForm.account,
        password: this.ruleForm.password
      })
      this.$axios({
        headers: {
          Authorization: ' ',
          'content-Type': 'application/json;charset=UTF-8'
          //  Accept: 'application/json;charset=UTF-8'
        },
        method: 'post',
        url: 'http://127.0.0.1:8082/login',
        data: user
      }).then(res => {
        console.log(res.data)
        // console.log(this_.comsys.val(1))
        if (res.data.status === 'failed') {
          // //登陆失败关掉登陆窗口
          //  this.dialogVisible = false
           //清空用户名密码

          this.ruleForm.account= ''
         this.ruleForm.password= ''
         this.ruleForm.password2= ''
          //提示用户输入错误
          this.$message.error(
            '权限验证失败,您输入的账号或者密码错误，请重试！'
          )
        } else if (res.data.status === 'success') {
          if (res.data.role === '管理员') {
            // Cookies.set('token', '1')
            //弹出提示用户获取权限窗口
            this.dialogVisible2=true;
            //下面值为true表示用户获取了权限，false表示用户没有权限
            this.openpower=true
              //清空账号，密码
               this.ruleForm.account= ''
         this.ruleForm.password= ''
         this.ruleForm.password2= ''

          } else if (res.data.role === '运维员') {
            // Cookies.set('token', '2')
               //下面值为true表示用户获取了权限，false表示用户没有权限
             this.openpower=true
              //弹出提示用户获取权限窗口
            this.dialogVisible2=true;
            //清空账号，密码
                this.ruleForm.account= ''
         this.ruleForm.password= ''
         this.ruleForm.password2= ''

          } else if (res.data.role === '值班员') {
            // Cookies.set('token', '3')
              //清空用户名密码
            this.ruleForm.account= ''
         this.ruleForm.password= ''
         this.ruleForm.password2= ''
           this.$message.error('您没有权限操控开关，请联系管理员！')
          }
         
         
        }
        // _this.userToken = res.data.token
      })


    },

    //改变开关状态
    changshow2(){
                this.dialogVisible3=false
               let val=this.newnode
              if(val.fillStyle=='rgba(18, 232, 60, 1)'){
                        let YKID=''
                  if(val.id=='switch1'){
                        YKID=12
                  }else if(val.id=='switch2'){
                        YKID=14
                  }else if(val.id=='switch3'){
                        YKID=18
                  }else if(val.id=='switch4'){
                        YKID=20
                  }else if(val.id=='switch5'){
                        YKID=24
                  }else if(val.id=='switch6'){
                        YKID=30
                  }else if(val.id=='switch7'){
                        YKID=28
                  }else if(val.id=='switch8'){
                        YKID=22
                  }else if(val.id=='switch9'){
                        YKID=26
                  }else if(val.id=='switch10'){
                        YKID=32
                  }else if(val.id=='switch11'){
                        YKID=34
                  }else if(val.id=='switch12'){
                        YKID=36
                  }else if(val.id=='switch21'){
                        YKID=40
                  }else if(val.id=='switch22'){
                        YKID=38
                  }
                  else if(val.id=='switch23'){
                        YKID=16
                  }
                 
                  let ID = this.$qs.parse(
                  {"ID":YKID,"Value":"1",DataType:'YK'}
                    )
                    //向另一程序发送按钮，开关关闭的状态
                        this.$axios({
                          headers: {
                            Authorization: ' ',
                            'content-Type': 'application/json;charset=UTF-8'
                            //  Accept: 'application/json;charset=UTF-8'
                          },
                          method: 'post',
                          url: 'http://127.0.0.1:8082/acceptdata/test',
                          data: ID
                        }).then(res => {
                          this.$message.success('合上开关指令已经下达')
                          console.log(res.data)
                        })
                 
                this.newnode.fillStyle = 'rgba(248, 25, 9, 1)'

                   }else if(val.fillStyle=='rgba(248, 25, 9, 1)'){
                      
                          let YKID=''
                  if(val.id=='switch1'){
                      YKID=13
                  }else if(val.id=='switch2'){
                        YKID=15
                  }else if(val.id=='switch3'){
                        YKID=19
                  }else if(val.id=='switch4'){
                        YKID=21
                  }else if(val.id=='switch5'){
                        YKID=25
                  }else if(val.id=='switch6'){
                        YKID=31
                  }else if(val.id=='switch7'){
                        YKID=29
                  }else if(val.id=='switch8'){
                        YKID=23
                  }else if(val.id=='switch9'){
                        YKID=27
                  }else if(val.id=='switch10'){
                        YKID=33
                  }else if(val.id=='switch11'){
                        YKID=35
                  }else if(val.id=='switch12'){
                        YKID=37
                  }else if(val.id=='switch21'){
                        YKID=41
                  }else if(val.id=='switch22'){
                        YKID=39
                  }
                  else if(val.id=='switch23'){
                        YKID=17
                  }

                 let ID = this.$qs.parse(
                  {"ID":YKID,"Value":"1",DataType:'YK'}
                    )
                    //向另一程序发送按钮，开关打开的状态
                        this.$axios({
                          headers: {
                            Authorization: ' ',
                            'content-Type': 'application/json;charset=UTF-8'
                            //  Accept: 'application/json;charset=UTF-8'
                          },
                          method: 'post',
                          url: 'http://127.0.0.1:8082/acceptdata/test',
                          data: ID
                        }).then(res => {
                           this.$message.success('断开开关指令已经下达')
                         
                          console.log(res.data)
                        })
                  
               
              
                this.newnode.fillStyle = 'rgba(18, 232, 60, 1)'
                   

                   }
    },
    changshow(val) {
      //保存选中的节点信息
      this.newnode=val;
      if(this.openpower==true){
           //判断控件是否是开关
      console.log(val.fillStyle)
        let arr=['switch1','switch2','switch23','switch3','switch4','switch5','switch6','switch7','switch8','switch9','switch10','switch11','switch12','switch22','switch21']
          if(arr.includes(val.id)){
            
               

             
              if (val.fillStyle == 'rgba(18, 232, 60, 1)') {
                   this.dialogVisible3=true
                   this.nowstate="断开"
                 
              } else if (val.fillStyle == 'rgba(248, 25, 9, 1)') {
                 this.dialogVisible3=true
                   this.nowstate="闭合"
                 
              } else if (val.type == '上') {
                val.icon = '\ue919'
              } else if (val.type == '下') {
                val.text = '上'
                val.icon = '\ue901'
              } else if (val.type == '左') {
                val.text = '右'
                val.icon = '\ue900'
              } else if (val.type == '右') {
                val.text = '左'
                val.icon = '\ue906'
              }
              
          } else {
            this.$message.error('您选择的控件不是开关，或者无法进行遥控操作！')
          }
          
      }else if(this.openpower==false){
             this.$message.error('您没有权限操作开关请，登陆验证！');
             //自动弹出验证框，方便用户进行验证
              this.dialogVisible=true;
      }
    
     
        
     
      
    },
    //跳转到故障管理界面
    openalarm() {
       this.$router.push('/systemoverview/alarmmanagement')
      // this.$notify({
      //   title: '告警',
      //   message: '这是一条警告的提示消息，提示系统哪个地方出现故障。',
      //   type: 'warning'
      // })
    },
    //获取当前时间
     getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    //根据是否有告警信息来判断是否显示两种状态的告警按钮
    readdata() {
      this.$axios({
        method: 'get',
        params: {
          // name: name,
          date: this.getNowFormatDate()
        },
        url: 'http://127.0.0.1:8082/alarm/searchall'
      }).then(res => {
       console.log("没有故障信息，信号灯默认为绿色"+res.data.length)
        if(res.data.length==0){
            console.log("没有故障信息，信号灯默认为绿色")
            this.showimage=true
              this.showimage2=false
     
        }else if(res.data.length!=0){
               this.showimage=false
              this.showimage2=true
      
        }
      //  for(let i=0;i<res.data.length;i++){
      //      if(res.data[)
      //  }
        
      })
    },
   
   
    rowClass({ row, rowIndex }) {
      // if (this.selectRow.includes(rowIndex)) {
      //   return { 'background-color': 'rgba(185,221,249,0.75)' }
      // }
      // console.log(row, rowIndex)
    },
    async open() {
      if (!this.$route.query.id) {
        return
      }
      const data = await this.$axios.$get(
        '/api/topology/' + this.$route.query.id
      )
      if (data && data.id) {
        this.canvas.open(data.data)
      }
    },

    onMessage(event, data) {
      switch (event) {
        //当画布中元素被选中后执行的操作
        case 'node':
         
          console.log("选中的节点信息：----"+this.props.node)
          this.props = {
            a: data.id,
            node: data,
            line: null,
            multi: false,
            nodes: null,
            locked: data.locked
          }
        //  if (data.id == '开关通' || data.id == '开关闭') {
        //     if (
        //       this.ruleForm.age == '1026263358' &&
        //       this.ruleForm.pass == '123456' &&
        //       this.ruleForm.checkPass == '123456'
        //     ) {
        //        console.log("密码认证完毕")
        //       if (data.id == '开关通') {
        //          console.log("开关为通")
        //         data.id = '开关闭'
              
        //         data.fillStyle = '#15F720'
        //       } else if (data.id == '开关闭') {
        //         console.log("开关为比")
        //         data.id = '开关通'
        //         data.fillStyle = '#F82109'
        //       }
              // } else if (data.type == '上') {
              //   data.icon = '\ue919'
              // } else if (data.type == '下') {
              //   data.text = '上'
              //   data.icon = '\ue901'
              // } else if (data.type == '左') {
              //   data.text = '右'
              //   data.icon = '\ue900'
              // } else if (data.type == '右') {
              //   data.text = '左'
              //   data.icon = '\ue906'
              // }

              // console.log(data.iconColor)
              // console.log(data.icon)
          //   } else {
          //     this.$message.error('您需要输入账号和密码才能修改控件状态')
          //   }
          // } else {
          //   this.$message.error('您选择的控件无法操作，请重新选择')
          // }

          break
        case 'addNode':
          this.props = {
            node: data,
            line: null,
            multi: false,
            nodes: null,
            locked: data.locked
          }

          break
        case 'line':
        case 'addLine':
          this.props = {
            node: null,
            line: data,
            multi: false,
            nodes: null,
            locked: data.locked
          }
          break
        case 'multi':
          this.props = {
            node: null,
            line: null,
            multi: true,
            nodes: data.nodes.length > 1 ? data.nodes : null,
            locked: this.getLocked(data)
          }
          break
        case 'space':
          this.props = {
            node: null,
            line: null,
            multi: false,
            nodes: null,
            locked: false
          }
          break
        case 'moveOut':
          break
        case 'moveNodes':
        case 'resizeNodes':
          if (data.length > 1) {
            this.props = {
              node: null,
              line: null,
              multi: true,
              nodes: data,
              locked: this.getLocked({ nodes: data })
            }
          } else {
            this.props = {
              node: data[0],
              line: null,
              multi: false,
              nodes: null,
              locked: false
            }
          }
          break
        case 'resize':
        case 'scale':
        case 'locked':
          if (this.canvas && this.canvas.data) {
            this.$store.commit('canvas/data', {
              scale: this.canvas.data.scale || 1,
              lineName: this.canvas.data.lineName,
              fromArrowType: this.canvas.data.fromArrowType,
              toArrowType: this.canvas.data.toArrowType,
              fromArrowlockedType: this.canvas.data.locked
            })
          }
          break
      }
    },

    getLocked(data) {
      let locked = true
      if (data.nodes && data.nodes.length) {
        for (const item of data.nodes) {
          if (!item.locked) {
            locked = false
            break
          }
        }
      }
      if (locked && data.lines) {
        for (const item of data.lines) {
          if (!item.locked) {
            locked = false
            break
          }
        }
      }

      return locked
    },

    onUpdateProps(node) {
      // 如果是node属性改变，需要传入node，重新计算node相关属性值
      // 如果是line属性改变，无需传参
      this.canvas.updateProps(node)
      // this.$message.error('您需要输入账号和密码才能修改控件状态')
    },

    handle_new(data) {
      this.canvas.open({ nodes: [], lines: [] })
    },

    handle_open(data) {
      this.handle_replace(data)
    },

    handle_replace(data) {
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
            
              if (
                // data &&
                // Array.isArray(data.nodes) &&
                // Array.isArray(data.lines)
                data
              ) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },
    //将保存到数据库中的拓扑图读出来
    handle_readtodatabase(data) {
      this.$axios({
        method: 'get',
        params: {
          name: '系统结构'
        },
        url: 'http://127.0.0.1:8082/topology/readtopology'
      }).then(res => {
       
        let newdata = JSON.parse(res.data.data)
      
        this.canvas.open(newdata)
      })
    },
    handle_save(data) {
      FileSaver.saveAs(
        new Blob([JSON.stringify(this.canvas.data)], {
          type: 'text/plain;charset=utf-8'
        }),
        // `le5le.topology.json`
        `11111.json`
      )
    },

    handle_savePng(data) {
      this.canvas.saveAsImage('le5le.topology.png')
    },

    handle_saveSvg(data) {
      const ctx = new C2S(
        this.canvas.canvas.width + 200,
        this.canvas.canvas.height + 200
      )
      for (const item of this.canvas.data.nodes) {
        item.render(ctx)
      }

      for (const item of this.canvas.data.lines) {
        item.render(ctx)
      }

      let mySerializedSVG = ctx.getSerializedSvg()
      mySerializedSVG = mySerializedSVG.replace(
        '<defs/>',
        `<defs>
    <style type="text/css">
      @font-face {
        font-family: 'topology';
        src: url('http://at.alicdn.com/t/font_1331132_h688rvffmbc.ttf?t=1569311680797') format('truetype');
      }
    </style>
  </defs>`
      )

      mySerializedSVG = mySerializedSVG.replace(/--le5le--/g, '&#x')

      const urlObject = window.URL || window
      const export_blob = new Blob([mySerializedSVG])
      const url = urlObject.createObjectURL(export_blob)

      const a = document.createElement('a')
      a.setAttribute('download', 'le5le.topology.svg')
      a.setAttribute('href', url)
      const evt = document.createEvent('MouseEvents')
      evt.initEvent('click', true, true)
      a.dispatchEvent(evt)
    },

    handle_undo(data) {
      this.canvas.undo()
    },

    handle_redo(data) {
      this.canvas.redo()
    },

    handle_copy(data) {
      this.canvas.copy()
    },

    handle_cut(data) {
      this.canvas.cut()
    },

    handle_parse(data) {
      this.canvas.parse()
    },

    handle_state(data) {
      this.canvas.data[data.key] = data.value
      this.$store.commit('canvas/data', {
        scale: this.canvas.data.scale || 1,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
    },

    onContextMenu(event) {
      event.preventDefault() //阻止默认行为
      event.stopPropagation() //阻止冒泡

      if (event.clientY + 360 < document.body.clientHeight) {
        this.contextmenu = {
          left: event.clientX + 'px',
          top: event.clientY + 'px'
        }
      } else {
        this.contextmenu = {
          left: event.clientX + 'px',
          bottom: document.body.clientHeight - event.clientY + 'px'
        }
      }
    }
  }
}
</script>
<style lang="scss">
.input22 .el-input__inner {
  width: 8rem;
  height: 2.5rem;

  border-radius: 4px;
  border: 1px solid #b6d8f1;
  color: white;
  outline: 0;
  background-color: #062e2f;
}

.newdialog .el-dialog__header {

  background: #084646;

}

/* 弹出层设置背景色 底部*/

.newdialog .el-dialog__footer {

  background-color: #084646 !important;

}
.form .el-form-item__label {
  color: black;
}

.nuxt {
  color: white;
  text-decoration: none;
}
</style>
<style lang="scss" scoped>
#topology-canvas {
  // width: 1600px;
  width: 100%;
  height: 700px;
  
}
.el-header{
  z-index:5;
}
.showdata1{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 44%;
  top: 0px;
  z-index: 1
}
.showdata2{
  width:15rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 12%;
  top: 420px;
  z-index: 1
}
.showdata3{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 15%;
  top: 360px;
  z-index: 1
}
.showdata4{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 7%;
  top: 390px;
  z-index: 1
}
.showdata5{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 27%;
  top: 160px;
  z-index: 1
}
.showdata6{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 28%;
  top: 505px;
  z-index: 1
}
.showdata7{
   width:9rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 33%;
  top: 505px;
  z-index: 1
}
.showdata8{
   width:9rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 40%;
  top: 505px;
  z-index: 1
}
.showdata9{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 42%;
  top: 250px;
  z-index: 1
}
.showdata10{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 50%;
  top: 220px;
  z-index: 1
}
.showdata11{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 53%;
  top: 450px;
  z-index: 1
}
.showdata12{
   width:9rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 38%;
  top: 600px;
  z-index: 1
}
.showdata13{
   width:7rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 47%;
  top: 600px;
  z-index: 1
}
.showdata14{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 55%;
  top: 600px;
  z-index: 1
}
.showdata15{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 64%;
  top: 600px;
  z-index: 1
}
.showdata16{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 82%;
  top: 420px;
  z-index: 1
}
.showdata17{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 1%;
  top: 245px;
  z-index: 1
}
.showdata18{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 33%;
  top: 90px;
  z-index: 1
}
.showdata19{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 46%;
  top: 160px;
  z-index: 1
}
.showdata20{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 30%;
  top: 300px;
  z-index: 1
}
.showdata21{
  width:9rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 87%;
  top: 495px;
  z-index: 1
}
.showdata22{
  width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 77%;
  top: 530px;
  z-index: 1
}
.showdata23{
   width:9rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 8%;
  top: 227px;
  z-index: 1
}
.showdata24{
   width:9rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 0;
  top: 320px;
  z-index: 1
}
.showdata25{
   width:13rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 15%;
  top: 310px;
  z-index: 1
}
.showdata26{
   width:9rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 42%;
  top: 283px;
  z-index: 1
}
.showdata27{
   width:10rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 22%;
  top: 330px;
  z-index: 1
}
.showdata28{
   width:10rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 43%;
  top: 330px;
  z-index: 1
}
.showdata29{
   width:10rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 29%;
  top: 330px;
  z-index: 1
}
.showdata30{
   width:10rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 49%;
  top: 330px;
  z-index: 1
}
.showdata31{
   width:10rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 70%;
  top: 330px;
  z-index: 1
}

.showdata32{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 37%;
  top: 330px;
  z-index: 1
}
.showdata33{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 58%;
  top: 330px;
  z-index: 1
}
.showdata34{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 42%;
  top: 1px;
  z-index: 1
}
.showdata35{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 54%;
  top: 570px;
  z-index: 1
}
.showdata36{
   width:8rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 70%;
  top: 370px;
  z-index: 1
}
.formdata{
  width:60rem;
  height:0rem;
  color:#fff;
  border:0px;
  background-color:#032A2C;
  position: absolute;
  left: 65%;
  top: 10px;
  z-index: 2
}
.newbutton1 {
  position: absolute;
  left: 90%;
  top: 70px;
  z-index: 1;
}
.newbutton2 {
  position: absolute;
  left: 90%;
  top: 130px;
  z-index: 1;
}
.newbutton3 {
  position: absolute;
  left: 90%;
  top: 10px;
  z-index: 1;
}
.newbutton4 {
  position: absolute;
  left: 90%;
  top: 190px;
  z-index: 1;
}
#showinfotable1 {
  width: 13rem;
  height: 13rem;
}
#showinfotable2 {
  width: 13rem;
  height: 13rem;
}
.mainimage {
  // width: 1820px;
  width: 98%;
  background-image: url(../../assets/images/新UI23.png);
  background-repeat: no-repeat;
  background-size:100% 100%;
  margin-top: 3%;
  margin-left: 0.5%;
  padding-left:2rem;
  padding-top:2rem;

  // position: absolute;
  // opacity: 0.5;
  // margin-top: 50px;
  // margin-left: 10px;
}
#weather-view-he {
  width: 100%;
  height: 220px;
  background-image: url(../../assets/images/新UI23.png);
  background-repeat: no-repeat;
  background-size:100% 100%;
  // position: relative;
}
.full {
  flex: 1;
  width: initial;
  position: relative;
  overflow: auto;
  // background: #fff;

  // background-image: url(../../assets/images/新UI26.png);
  // background-repeat: no-repeat;
}
// .newback{
//  background-image: url(../../assets/images/新UI26.png);
//   background-repeat: no-repeat;
// }
.context-menu {
  position: fixed;
  z-index: 10;
}
.el-image {
  border-radius: 80px;
}
.current-row > td {
  background: rgba(0, 158, 250, 0.219) !important;
}
.tabletype {
  border-radius: 20px;
}
.el-container {
  background-image: url(../../assets/images/新UI12.png);
  background-repeat: no-repeat;
  background-size:100% 100%;
}
.formbutton .el-button {
  background-color: #032f2f;
  color: white;
}
.el-button {
  margin-top: 13px;
  margin-left: 13px;
  background-image: url(../../assets/images/新UI25.png);
  background-size: 100% 100%;
  border-width: 1px;
}
#row1 {
  background-image: url(../../assets/images/新UI24.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-color: #005a5b;
  width: 98%;
  height: 60px;
  margin-left: 10px;
}
// #col1 {
//   height: 810px;
//   background-color: #005a5b;
// }
// #col2 {
//   height: 810px;
//   background-color: #005a5b;
// }

.el-main {
  padding-top: 0px;
  margin-top: 0px;
}
// .el-footer {
//   background-color: #005a5b;
// }
//******************************吸取教训花了将近三个小时才找到问题出现在哪里？右键点击菜单的样式属性.context-menu包含在.page属性中，但是整个页面没有用到.page属性
// 所以也没用到.context-menu导致问题，导致菜单位置错误，知道无意中看到另一个页面用了.page样式而发现问题

.page {
  display: flex;
  width: 100%;
  // height: 100%;

  .tools {
    flex-shrink: 0;
    width: 1.75rem;
    background-color: #f8f8f8;
    // background-color: rgb(0, 101, 105);
    border-right: 1px solid #d9d9d9;
    overflow-y: auto;

    .title {
      color: #0d1a26;
      font-weight: 600;
      font-size: 0.12rem;
      line-height: 1;
      padding: 0.05rem 0.1rem;
      margin-top: 0.08rem;
      border-bottom: 1px solid #ddd;

      &:first-child {
        border-top: none;
      }
    }

    .buttons {
      padding: 0.1rem 0;
      a {
        display: inline-block;
        color: #314659;
        line-height: 1;
        width: 0.4rem;
        height: 0.4rem;
        text-align: center;
        text-decoration: none !important;

        .iconfont {
          font-size: 0.24rem;
        }
      }
    }
  }
  .full {
    flex: 1;
    width: initial;
    position: relative;
    overflow: auto;
    // background: #fff;
    // background-image: url("+require('../assets/images/timg.jpg')")
  }
  .props {
    flex-shrink: 0;
    width: 2.4rem;
    padding: 0.1rem 0;
    background-color: #f8f8f8;
    border-left: 1px solid #d9d9d9;
    overflow-y: auto;
    position: relative;
  }

  .context-menu {
    position: fixed;
    z-index: 10;
  }
}
</style>
